<template>
  <q-scroll-area class="fit">
    <div class="q-pa-sm">
      <div class="row q-col-gutter-lg">
        <div class="col-lg-4 col-md-4 col-xs-12 col-sm-12">
          <q-card class="no-shadow" bordered>
            <q-img :src="baseImg" />
            <q-separator></q-separator>
            <q-card-section class="text-h6 text-grey-8 q-pa-md">
              位置
            </q-card-section>
            <q-separator></q-separator>

            <q-card-section class="text-h6 text-grey-8 q-pa-md">
              中国合肥
            </q-card-section>
            <q-card-section>
              <div class="text-h5 q-mt-sm q-mb-xs text-grey-8">滨湖</div>
              <div>
                {{ text }}
              </div>
            </q-card-section>
            <q-card-actions>
              <q-btn label="去这里" class="text-capitalize" color="indigo-7" />
            </q-card-actions>
          </q-card>

          <basic-card class="q-mt-lg"></basic-card>

          <card-cafe class="q-mt-lg"></card-cafe>
        </div>
        <div class="col-lg-4 col-md-4 col-xs-12 col-sm-12">
          <basic-card></basic-card>

          <card-item
            class="q-mt-lg"
            :name="profile_card_data.name"
            :des="profile_card_data.des"
            :avatar="profile_card_data.avatar"
          ></card-item>

          <card-profile
            class="q-mt-lg"
            :name="profile_card_data.name"
            :des="profile_card_data.des"
            :avatar="profile_card_data.avatar"
          ></card-profile>

          <card-profile-dark
            class="q-mt-lg"
            :name="profile_data.name"
            :des="profile_data.des"
            :text="profile_data.text"
          ></card-profile-dark>
        </div>
        <div class="col-lg-4 col-md-4 col-xs-12 col-sm-12">
          <card-company
            class="q-mt-lg"
            :background_image="background_img2"
          ></card-company>

          <basic-card class="q-mt-lg"></basic-card>

          <card-company
            class="q-mt-lg"
            :background_image="background_img1"
          ></card-company>

          <card-profile-dark
            class="q-mt-lg"
            :name="profile_data.name"
            :des="profile_data.des"
            :text="profile_data.text"
          ></card-profile-dark>
        </div>
      </div>
    </div>
  </q-scroll-area>
</template>

<script setup lang="ts">
import { defineAsyncComponent } from 'vue';
import { baseImg } from 'pages/data/list';

const CardItem = defineAsyncComponent(
  () => import('components/cards/CardItem.vue')
);
const CardCafe = defineAsyncComponent(
  () => import('components/cards/CardCafe.vue')
);
const CardCompany = defineAsyncComponent(
  () => import('components/cards/CardCompany.vue')
);
const CardProfileDark = defineAsyncComponent(
  () => import('components/cards/CardProfileDark.vue')
);
const CardProfile = defineAsyncComponent(
  () => import('components/cards/CardProfile.vue')
);
const BasicCard = defineAsyncComponent(
  () => import('components/cards/CardBasic.vue')
);

const text =
  '小王子里说：如果你要驯服一个人，就要冒着掉眼泪的危险。我们从不惧怕眼泪，但是，要值得';

const profile_card_data = {
  name: '小皮',
  des: '项目经理',
  avatar: baseImg,
};
const profile_data = {
  name: '小福',
  des: '临时工',
  text: '苏州的护城河边没有简薇，南京的郁金香路没有陈艺，大理的风花雪月没有杨思思，人性的背后是苍狗，我们都要做生活的高手。',
};
const background_img1 = 'linear-gradient(to top, #30cfd0 0%, #330867 100%)';
const background_img2 =
  'linear-gradient(87deg, rgb(45, 206, 137), rgb(45, 206, 204)) !important';
</script>

<style scoped></style>
